<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<h:head>
	<style type="text/css">
.addButton {
	background-image: url(images/add.png)
}
</style>
	<title><h:outputText value="#{messages['defineUserGroup.title']}" /></title>
</h:head>
<body>
	<ui:composition template="../templates/mainTemplate.xhtml">
		<ui:define name="content">
			<h:form id="myForm">
				<p:panel header="#{messages['defineUserGroup.title']}">
					<p:dataTable value="#{cUserGroupForm.userGroupList}" var="usergroup" id="grupTable">
						<p:column headerText="#{messages['defineUserGroup.id']}">
							<h:outputText value="#{usergroup.id}" />
						</p:column>
						<p:column headerText="#{messages['defineUserGroup.name']}">
							<h:outputText value="#{usergroup.name}" />
						</p:column>
						<p:column headerText="#{messages['defineUserGroup.description']}">
							<h:outputText value="#{usergroup.description}" />
						</p:column>
						<p:column style="text-align: left; width:50px;">
							<f:facet name="header">
								<center>
									<p:commandLink oncomplete="dlg1.show();" update=":myForm:addingPanel"
										action="#{cUserGroupAction.setNewUserGroup()}">
										<p:graphicImage value="/images/add.png" />
									</p:commandLink>
								</center>
							</f:facet>
							<center>
								<h:panelGrid columns="2">
									<p:commandLink action="#{cUserGroupAction.setUserGroupForUpdate(usergroup)}" oncomplete="dlg1.show();"
										update=":myForm:addingPanel">
										<p:graphicImage value="/images/edit.jpg" />
									</p:commandLink>
									<p:commandLink action="#{cUserGroupAction.deleteUserGroup(usergroup)}" oncomplete="deleteWidget.show();"
										update=":myForm:deletePanel">
										<p:graphicImage value="/images/remove.png" />
									</p:commandLink>
								</h:panelGrid>
							</center>
						</p:column>
					</p:dataTable>
					<p:dialog id="addingPanel" header="#{messages['defineUserGroup.insertTitle']}" widgetVar="dlg1" showEffect="bounce"
						hideEffect="explode" resizable="false">
						<p:ajax event="close" listener="#{cUserGroupForm.setEnableUpdate(false)}" />

						<h:panelGrid columns="2">
							<h:outputText value="#{messages['defineUserGroup.id']} : " rendered="#{cUserGroupForm.enableUpdate}" />
							<h:outputText value="#{cUserGroupForm.userGroup.id}" rendered="#{cUserGroupForm.enableUpdate}" />

							<h:outputText value="#{messages['defineUserGroup.name']} : " />
							<p:inputText value="#{cUserGroupForm.userGroup.name}" />

							<h:outputText value="#{messages['defineUserGroup.description']} : " />
							<p:inputText value="#{cUserGroupForm.userGroup.description}" />

							<p:commandButton value="#{messages['action.save']}" action="#{cUserGroupAction.insert()}"
								update=":myForm:grupTable" oncomplete="dlg1.hide();" rendered="#{not cUserGroupForm.enableUpdate}" />

							<p:commandButton value="#{messages['action.update']}" action="#{cUserGroupAction.update()}"
								update=":myForm:grupTable" oncomplete="dlg1.hide();" rendered="#{cUserGroupForm.enableUpdate}" />

							<p:commandButton value="#{messages['action.cancel']}" onclick="dlg1.hide();"
								action="#{cUserGroupForm.setEnableUpdate(false)}" />
						</h:panelGrid>
					</p:dialog>

					<p:confirmDialog id="deletePanel" header="#{messages['defineUserGroup.deleteTitle']}"
						message="#{messages['defineUserGroup.deleteMessage']}" severity="alert" widgetVar="deleteWidget" closable="true">

						<p:commandButton id="confirm" value="#{messages['action.okay']}" update=":myForm:grupTable"
							oncomplete="deleteWidget.hide()" actionListener="#{cUserGroupAction.delete}" />

						<p:commandButton id="decline" value="#{messages['action.cancel']}" onclick="deleteWidget.hide()" type="button" />
					</p:confirmDialog>
				</p:panel>
			</h:form>
		</ui:define>
	</ui:composition>
</body>
</html>